<template>
  <div class="timer"></div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.timer {
  display: inline-block;
  height: 16px;
  width: 16px;
  border: 1px solid #FFF;
  border-radius: 100%;
  box-sizing: border-box;
  position: relative;

  &::before,
  &::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 7px;
    display: block;
    width: 1px;
    margin-left: -0.5px;
    margin-top: -0.5px;
    background-color: #FFF;
    border-radius: 1px;
    transform-origin: 0.5px 0.5px 0;
    animation: timer-loader 1050ms infinite linear;
    animation-delay: -325ms;
  }

  &::before {
    height: 6px;
  }
  &::after {
    height: 4px;
    animation-duration: 10s;
    animation-delay: -7.5s;
  }
}

@keyframes timer-loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>